import React from 'react';
import { Popover, Button, Space } from 'antd';
import { Highlight } from '@tiptap/extension-highlight';
import { HighlightOutlined, CloseOutlined } from '@ant-design/icons';
import styles from './index.module.less';

const DEFAULT_HIGHLIGHT_COLORS = [
  { name: '红色', value: '#ffcdd2' },
  { name: '橙色', value: '#ffe0b2' },
  { name: '黄色', value: '#fff9c4' },
  { name: '绿色', value: '#c8e6c9' },
  { name: '蓝色', value: '#bbdefb' },
  { name: '紫色', value: '#e1bee7' },
];

const HighlightPopover = ({ editor, colors = DEFAULT_HIGHLIGHT_COLORS, hideWhenUnavailable = false }) => {
  if (!editor) {
    return null;
  }

  const isHighlighted = editor.isActive('highlight');

  const content = (
    <div className={styles.highlightPopoverContent}>
      <Space>
        {colors.map((color) => (
          <Button
            key={color.value}
            className={`${styles.highlightButton} ${isHighlighted && editor.getAttributes('highlight').color === color.value ? styles.active : ''}`}
            style={{ backgroundColor: color.value }}
            onClick={() => {
              editor.chain().focus().toggleHighlight({ color: color.value }).run();
            }}
          >
            {color.name}
          </Button>
        ))}
        {isHighlighted && (
          <Button
            className={styles.removeButton}
            icon={<CloseOutlined />}
            onClick={() => {
              editor.chain().focus().unsetHighlight().run();
            }}
          />
        )}
      </Space>
    </div>
  );

  if (hideWhenUnavailable && !editor.isActive('highlight')) {
    return null;
  }

  return (
    <Popover
      content={content}
      trigger="click"
      placement="bottom"
      overlayClassName={styles.highlightPopover}
    >
      <Button
        type={isHighlighted ? 'primary' : 'default'}
        icon={<HighlightOutlined />}
      />
    </Popover>
  );
};

export default HighlightPopover; 